<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂跳动的心</title>
    <style>
        /* 设置整个页面的样式 */
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
            /* 背景渐变效果 */
        }

        /* 定义心形样式 */
       .heart {
            width: 150px;
            height: 135px;
            position: relative;
            transform: rotate(-45deg);
            animation: beat 1s infinite alternate, rotate 5s infinite linear;
            /* 应用跳动和旋转动画 */
            filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));
            /* 光影效果 */
        }

       .heart:before,
       .heart:after {
            content: "";
            position: absolute;
            border-radius: 50%;
            animation: colorChange 3s infinite alternate;
            /* 颜色变化动画 */
        }

       .heart:before {
            width: 75px;
            height: 75px;
            left: 75px;
            top: 0;
        }

       .heart:after {
            width: 75px;
            height: 75px;
            left: 0;
            top: 0;
        }

        /* 定义跳动动画 */
        @keyframes beat {
            from {
                transform: scale(1) rotate(-45deg);
            }

            to {
                transform: scale(1.3) rotate(-45deg);
            }
        }

        /* 定义旋转动画 */
        @keyframes rotate {
            from {
                transform: rotate(-45deg);
            }

            to {
                transform: rotate(315deg);
            }
        }

        /* 定义颜色变化动画 */
        @keyframes colorChange {
            0% {
                background-color: #ff0000;
            }

            25% {
                background-color: #ff4500;
            }

            50% {
                background-color: #ff69b4;
            }

            75% {
                background-color: #ff1493;
            }

            100% {
                background-color: #8b0000;
            }
        }
    </style>
</head>

<body>
    <div class="heart"></div>
</body>

</html>